backbone学习笔记：1最简单的View

用duo等工具实现文件模块化后，引入Backbone来加强项目的MVC结构。
官方教程，是自上而下的从概念来描述原理，适合有基础的同学学习，但做为由浅入深的学习路径，还是需要自己手动一步一步学习。

本文参考了这个简易教程，但由于backbone后期版本变化，针对原文内容有修改。

从View开始说起

传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Backbone</title>
</head>

<body>
    <div class="wrapper"></div>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/underscore-min.js"></script>
    <script src="js/lib/backbone-min.js"></script>
    <script src="build/x.js"></script>
</body>
</html>

其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到

1.js

var ListView = Backbone.View.extend({
  //el: $('.wrapper'),

  // 初始化函数，new时，backbone会自动调用
  initialize: function() {
    this.render();
  },

  // 真正把修改操作同步到浏览器中
  render: function() {
    this.$el.append("<ul><li>Hello techfellow!</li></ul>");
  }
});

var listView = new ListView({el: $('.wrapper')});

执行：

$duo 1.js

知识点说明

el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
initialze：调用new时，会触发的函数调用，类似构造函数。
render：触发DOM操作，浏览器会渲染
最后一句，说明在new时，可以传递参数

疑惑

在作者的文档中，有一句

If the element already exists in the page, you can set el as a CSS selector that matches the element.
el: '.wrapper'

即：如果写成 new ListView({el: '.wrapper'})也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。

$el和$()

$(this.el) 等价于 this.$el
$(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement

如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
      events: {
        click: function(e) {
          console.log(view.el === e.target);
        }
      }
    });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true